<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {useUserStore} from './stores/user'
const user = useUserStore()

// console.log(user.loginState);


</script>

<template>

  

  <div class='container'>
   
   
    <!-- <main class='box'>
      <header class='header'>
        头部-首页
      </header>

      <div class='content'>
        主体内容部分
      </div>
    </main> -->


  <router-view v-slot="{ Component }">
    <transition name="fade">
    <keep-alive include="HomeIndex">
      <component :is="Component" />
    </keep-alive>
    </transition>
  </router-view>

  <!-- 命名视图 -->
  <RouterView name="footer" />

  <div class="tip">请将屏幕竖向使用</div>

  </div>

</template>

<style lang='scss'>
html,body,#app,.container {
  height: 100%;
}
html {
  /* 
    目前百分之 90 以上的 UI 设计师会使用 iphone6/7/8 的尺寸进行设计，我们的设计稿如果是
    iPhone 6/7/8 为基础图,我们应该使用公式进行计算 100 / 375 * 100 = 26.666666666vw
    如果设计稿 iPhone12Pro 为基础图，那么我们可以 100 / 390 * 100 = 25.641vw

  */
  font-size: 26.6666666666vw;
}
body {
  /* 具体的值要根据设计图来决定应该写多少，这里的值是设计图中出现次数最多的字号 */
  font-size: 12px;
}
.container {
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .header {
    height: 0.44rem;
    background-color: #f66;
    color: white;
    line-height: 0.44rem;
    text-align: center;
  }
  .content {
    flex: 1;
    overflow: auto;

    /* 平滑滚动，点击回到顶部的动画添加 */
    scroll-behavior: smooth;
    /* background-color: #ccc; */
  }
}
.footer {
  height: 0.5rem;
  border-top: 1px solid #ccc;
  display: flex;

  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    color: #000;
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    span {
      padding-top: 4px;
      box-sizing:border-box;
    }
  }
}
.footer .router-link-active{
  color: #f66;
}


.fade-enter-active{
  transition: all 0.3s;
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-to{
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------- */
.tip {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  font-size: 30px;
  color: white;
  text-align: center;

  /* display: flex; */
  justify-content: center;
  align-items: center;

  /* 默认的时候将该内容隐藏掉 */
  display: none;

}
/* 
 竖屏 portrait：指定输出设备中的页面可见区域高度大于或等于宽度
 横屏 landscape：除portrait值情况外，都是landscape
 */
@media screen and (orientation: landscape) {
  .tip {
    display: flex;
  }
}
</style>
